<template>
	<view class="mineWarrantyContainer">
		<view class="headNavBox flex">
			<view class="headNavItem" v-for="item,index in navList" :key="index" @click="changeTab(index)">
				<view class="headNavTitle">{{item.title}}</view>
				<view :class="navIdx===index ? 'activeTab' : ''" :style="{'margin-left': item.marginLeftNavBottom + '%' }"></view>
			</view>
		</view>
		 <!-- @scrolltolower="lower" -->
		<scroll-view :scroll-y="isScroll" :style="{ height: windowHeight + 'px' }":scroll-top="scrollTop">
			<block v-if="warrantyList.length > 0">
				<view class="warrantyItem" v-for="item,index in warrantyList" :key="index" @click="goDetail(item)">
					<view class="flex">
						<view class="warrantyLabel flex">
							<image src="../../static/images/warrantyTypeIcon.png" class="warrantyIcon"></image>
							<view>报修类型：</view>
						</view>
							<!-- 报修状态（0报修中 1已确认 2已完成） -->
						<view class="warrantyTxt">{{item.typeName ? item.typeName : '-'}}</view>
						<view class="warrantyStateBgBox" v-if="item.state == 0">
							<view class="warrantyStateTxt">处理中</view>
							<image src="../../static/images/processingBg.png" class="warrantyStateBg"></image>
						</view>
						<view class="warrantyStateBgBox" v-else-if="item.state == 2">
							<view class="warrantyStateTxt">已完成</view>
							<image src="../../static/images/completedBg.png" class="warrantyStateBg"></image>
						</view>
						<view class="warrantyStateBgBox" v-else>
								<view class="warrantyStateTxt">待处理</view>
								<image src="../../static/images/pendingBg.png" class="warrantyStateBg"></image>
						</view>
					</view>
					<view class="flex">
						<view class="warrantyLabel flex">
							<image src="../../static/images/warrantyLocationIcon.png" class="warrantyIcon"></image>
							<view>报修地点：</view>
						</view>
						<view class="warrantyTxt2">{{item.repairPlace ? item.repairPlace : '-'}}</view>
					</view>
				</view>
			</block>
			<view v-else class="noDataTxt">暂无数据</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navIdx: 0,
				navList: [
					{
						title: '全部的',
						id:0,
						marginLeftNavBottom: 38,
						state: '' //报修状态筛选，不传时查全部： 0报修中；1已确认；2已完成
					},{
						title: '待处理',
						id:1,
						marginLeftNavBottom: 38,
						state: 1
					},{
						title: '处理中',
						id:2,
						marginLeftNavBottom: 38,
						state: 0
					},{
						title: '已结束',
						id:3,
						marginLeftNavBottom: 38,
						state: 2
					}
				],
				warrantyList: [],
				isScroll: true,
				windowHeight: 0,
				scrollTop: 0,
			}
		},
		onLoad() {
			let _this = this;
			wx.getSystemInfo({
				success: function(res) {
					console.log(11,res)
					_this.windowHeight = res.windowHeight;
				}
			})
		},
		onShow() {
			this.searchWarrantyList('');
		},
		methods: {
			//切换tab页
			changeTab(idx) {
				this.navIdx = idx;
				let state = this.navList[idx].state;
				this.searchWarrantyList(state);
			},
			goDetail(item) {
				uni.navigateTo({
					url: '/pages/onlineWarranty/onlineWarranty?repairId='+item.repairId,
				});
			},
			searchWarrantyList(state='') {
				let _this = this;
				_this.$utils.requestFun('/member/userRepair/api/queryUserRepairListFront?route=member', {
					token: getApp().globalData.token,
					state: state //报修状态筛选，不传时查全部： 0报修中；1已确认；2已完成
				}, 'GET').then(res => {
					console.log(111,res)
					if(res.data.data.data && res.data.data.data.length > 0) {
						_this.warrantyList = res.data.data.data;
					}else {
						_this.warrantyList = [];
					}
					/* let warrantyData = _this.warrantyList;
					if(res.data.data.data && res.data.data.data.length > 0) {
						if(_this.page == 1) {
							warrantyData = [];
						}
						let warrantyList = res.data.data.data;
						if(warrantyList.length < _this.limit) {
							_this.warrantyList = warrantyData.concat(warrantyList);
							_this.hasMoreData = false;
						}else {
							_this.warrantyList = warrantyData.concat(warrantyList);
							_this.hasMoreData = true;
							_this.page = _this.page++;
						}
					}else {
						if(_this.page == 1) {
							_this.warrantyList = [];
						}else {
							_this.warrantyList = warrantyData;
						}
					} */
				});
			}
		}
	}
</script>

<style>
	.mineWarrantyContainer {
		width: 100%;
		height: 100vh;
		background: #F6F6F6;
	}
	.txtOverFlow {
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.flex {
		display: flex;
	}
	.noDataTxt {
		color: #999999;
		text-align: center;
		margin: 100rpx 0;
		line-height: 200rpx;
	}
	.headNavBox {
		width: 100%;
		height: 80rpx;
		background: #FFFFFF;
	}
	.headNavItem {
		width: 33%;
		text-align: center;
		line-height: 74rpx;
	}
	.headNavTitle {
		font-size: 28rpx;
		color: #222222;
	}
	.activeTab {
		width: 46rpx;
		height: 6rpx;
		background-image: linear-gradient(to right, #1eaf7b , #c7e2ac);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
	.warrantyItem {
		width: 92%;
		margin: 20rpx 24rpx;
		min-height: 100rpx;
		padding: 40rpx 0 40rpx 15rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
	}
	.warrantyIcon {
		width: 30rpx;
		height: 30rpx;
		margin-right: 11rpx;
	}
	.warrantyLabel {
		width: 28.5%;
		font-size: 30rpx;
		color: #666666;
		line-height: 32rpx;
		text-align: center;
	}
	.warrantyTxt {
		width: 53%;
		text-align: left;
		font-size: 30rpx;
		color: #222222;
		line-height: 32rpx;
	}
	.warrantyTxt2 {
		width: 68%;
		text-align: left;
		font-size: 30rpx;
		color: #222222;
		margin-top: -8rpx;
		line-height: 50rpx;
	}
	.warrantyStateBgBox {
		width: 130rpx;
		height: 60rpx;
		position: relative;
		right: 0px;
		top: -4px;
	}
	.warrantyStateTxt {
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 60rpx;
		position: absolute;
		text-align: center;
		width: 130rpx;
		z-index: 99;
	}
	.warrantyStateBg {
		width: 130rpx;
		height: 60rpx;
	}
</style>
